<template>
    <Echart
      :options="options"
      id="centreRight2Chart1"
      height="100%"
      width="100%"
    ></Echart>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        // 固定样式数据
        this.options = {
          radar: {
            center: ['50%', '50%'],
            radius: '70%',
            shape: 'rect',
            name: {
              formatter: function (name) {
                let arr;
                arr = ['{a|' + name + '}'];
                return arr.join('\n');
              },
              textStyle: {
                rich: {
                  //根据文字的组设置格式
                  a: {
                    color: '#BCDCFF',
                    fontSize: 14,
                    fontWeight: 600,
                    fontFamily: 'Source Han Sans CN',
                  },
                },
              },
            },
            // 名字和图形的距离
            nameGap: 5,
            indicator: newData.indicatorData,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitArea: {
              areaStyle: {
                color: [
                  'rgba(84,136,255, 0.05)',
                  'rgba(84,136,255, 0.1)',
                  'rgba(84,136,255, 0.2)',
                  'rgba(84,136,255, 0.3)',
                  'rgba(84,136,255, 0.4)',
                  'rgba(84,136,255, 0.5)',
                ].reverse(),
                shadowColor: 'rgba(0, 0, 0, .5)',
                shadowBlur: 5,
                shadowOffsetX: 10,
                shadowOffsetY: 10,
              },
            },
          },
          series: [
            {
              // name: '用户浏览类别',
              type: 'radar',
              data: [
                {
                  value: newData.data, //[5,5,5,5,5,5],
                  symbol: 'none',
                  // 边缘颜色
                  lineStyle: {
                    color: 'rgba(160,159,246, 0.6)',
                    width: 2,
                  },
                  areaStyle: {
                    color: 'rgba(114,113,233,.4)',
                    opacity: 0.8,
                    shadowColor: 'rgba(115,149,255,1)',
                    shadowBlur: 10,
                  },
                }
              ],
              label: {
                color: '#9ae8ac',
                distance: 10,
                align: 'right',
              },

            }
             //end
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>
